<template>
	<view class="content">
		<div class="pos-rel" v-if="loading">
			<!-- 内容 -->
			<div class="h80 bg-fff pl-20 pr-20">
				<div class="inputBox flex-center h70 bor-r16 pl-30 pr-30" @click="toSearch">
					<div class="iconfont icon-a-gangweiguanli1 mr-10"></div>
					<input v-model="searchKey" type="text" placeholder="搜索" />
				</div>
			</div>
			<div class="main mt-20 flex" :style="{ paddingTop: 2 * navTop + custom.height + custom.top + 10 + 'px' }">
				<scroll-view style="height: calc(100vh - 140upx);white-space: normal" scroll-y="true" class="mainLeft">
					<div v-for="(item, index) in treeList" :key="index" class="item "
						:class="index === tabIndex ? 'cur' : ''" @click="changeTab(index)">
						<div>{{ item.typeName }}</div>
					</div>
				</scroll-view>
				<scroll-view style="height: calc(100vh - 140upx);white-space: normal;" scroll-y="true"
					class="mainRight ml-20">
					<div class="item" v-if="treeList[tabIndex].serveDtos">
						<!-- <div class="fontS30 lh-40 font-500 mb-20">{{ item.typeName }}</div> -->
						<div class="itemBox flex-center flex-wrap">
							<div v-for="(child, i) in treeList[tabIndex].serveDtos" :key="i" class="typeItem mb-32"
								@click="toDetail(child)">
								<image :src="baseUrl + child.carouselImageUrls" class="grid-icon typeImage"
									mode="aspectFill">
								</image>
								<div class="fontS24 mt-18 text-center fontE1">{{ child.serveName }}</div>
							</div>
						</div>

					</div>
					<div class="info">
						<div v-for="(item, index) in treeList[tabIndex].childrenQryServeTreeRspDtos" class="item mb-20">
							<div>
								<div class="fontS30 lh-40 font-500 mb-20">{{ item.typeName }}</div>
								<div class="itemBox flex-center flex-wrap">
									<div v-for="(child, i) in item.serveDtos" :key="i" class="typeItem mb-32"
										@click="toDetail(child)">
										<image :src="baseUrl + child.carouselImageUrls" class="grid-icon typeImage"
											mode="aspectFill">
										</image>
										<div class="fontS24 mt-18 text-center fontE1">{{ child.serveName }}</div>
									</div>
								</div>

							</div>
						</div>
					</div>
				</scroll-view>
			</div>
		</div>
		<bottom-tab-bar-com :tabIndexs="tabNum" :unRead="unRead" />


	</view>
</template>

<script>
const App = getApp().globalData;
import { unReadCount } from '@/api/message'


import {
	findServeTree,
} from "@/api/serve";



export default {

	data() {
		return {
			unRead: 0,
			tabNum: 1,
			baseUrl: getApp().globalData.baseUrl,
			params: {
				pageNum: 1,
				pageSize: 10
			},
			list: [],
			treeList: [],
			page: '',
			loading: false,
			tabIndex: 0,
			noteFlag: true

		};
	},
	computed: {
		userInfo() {
			return this.$store.getters.userInfo;
		},
	},

	async onLoad(option) {
		await this.getTreeList()
	},
	async onShow() {
		this.tabNum = 1
		this.$forceUpdate()
		if (this.userInfo && this.userInfo.userType) {
			await this.getUnReadCount()
		}
	},
	async onPullDownRefresh() {
		await this.getTreeList()
		uni.stopPullDownRefresh()
	},
	methods: {
		toSearch(){
			uni.navigateTo({
				url: `/pages/index/search`
			})
		},
		async getUnReadCount() {
			const { data } = await unReadCount()
			getApp().globalData.unReadCount = data
			this.unRead = data
		},
		changeTab(index) {
			this.tabIndex = index
		},
		// 行业分类
		async getTreeList() {
			const {
				data
			} = await findServeTree({ parentTypeId: 0 });
			this.loading = true
			this.treeList = data
		},

		toDetail(item) {
			uni.navigateTo({
				url: `/pages/service/serviceDetail?serveId=${item.serveId}`
			})
		},


	},
};
</script>

<style lang="less" scoped>
page {
	background-color: #f7f7f7 !important;
}

.content {
	height: 100vh;
	overflow-y: auto;

}

.main {

	.mainLeft {
		width: 180upx;
		background-color: #fff;

		.item {
			width: 180upx;
			height: 100upx;
			line-height: 100upx;
			text-align: center;
			position: relative;

			&.cur {
				background: #F7F7F7;
				color: #39B474;

				&::after {
					background: #39B474;
					position: absolute;
					left: 0;
					height: 48upx;
					width: 6upx;
					top: 0;
					bottom: 0;
					margin: auto 0;
					content: '';
				}
			}
		}
	}

	.mainRight {
		width: calc(100% - 220upx);

		.item {
			.itemBox {
				overflow: hidden;

				.typeItem {
					float: left;
					width: 32%;
					margin-right: 2%;

					&:nth-child(3n) {
						margin-right: 0 !important;
					}
				}

				.typeImage {
					width: 100%;
					height: 85upx;
					border-radius: 8upx;
				}
			}

			// background: #fff;
			// padding: 20upx;
		}


	}

}


.slectItem {
	padding: 6px 8px;
	background: #E9F8F0;
	color: #37AF71;
}
.inputBox{
	background: #f7f8f9;
	input{
		width: calc(100% - 40upx);
		height: 70upx;
		line-height: 70upx;
		
	}
	
}
</style>